<script lang="ts">
import { useAntdForm } from '@peng_kai/kit/antd';
import { cloneDeep } from '@peng_kai/kit/libs/lodash-es';
import { InputPassword } from '~comp/input';
import { flzxsqc } from '~/utils';
import { validatePassword } from '../helpers';

export const updatePasswordPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./UpdatePassword.vue')),
  {
    title: computed(() => $t('ouGLflMzr_8Elpz6TiTt')),
    wrapClassName: 'ant-cover__Modal-drawer __screen-drawer',
    width: 400,
    centered: true,
    footer: null,
    maskClosable: false,
  },
);
</script>

<script setup lang="ts">
const emits = defineEmits<{
  close: [];
}>();

const form = useAntdForm({
  password_old: {
    value: '',
    rules: [{ validator: validatePassword }],
  },
  password: {
    value: '',
    rules: [{ validator: validatePassword }],
  },
  password_confirm: {
    value: '',
    rules: [{ validator(_, value) {
      if (!value)
        return formResult($t('tEk2LUqYvzBMTl7So2p8'));
      if (value !== form.state.password)
        return formResult($t('5Juinv2jAFlT6Jqo3Xwft'));
      return formResult();
    } }],
  },
});
const userUpdatePasswordMut = useMutation({
  mutationKey: [apis.apiAuthUpdatePassword.id],
  mutationFn: apis.apiAuthUpdatePassword.setDefaultConfig({
    successMessage: $t('zsaLk1KtXyRrJmdsq5Jo2'),
  }),
  onSuccess() {
    emits('close');
  },
  onError(e, payload) {
    // TODO: 需要判断是否需要2FA
  },
});
const disabled = computed(() => userUpdatePasswordMut.isPending.value);

async function confirm() {
  const state = await form.$form.validate?.().catch(() => {});

  if (state) {
    const data = cloneDeep(form.state);
    data.password = flzxsqc(form.state.password);
    data.password_confirm = flzxsqc(form.state.password_confirm);
    data.password_old = flzxsqc(form.state.password_old);
    userUpdatePasswordMut.mutate({ requestBody: data });
  }
}
</script>

<template>
  <div>
    <AForm v-bind="form.props" class="ant-cover__Form-compact" hideRequiredMark :disabled="disabled" layout="vertical" @finish="confirm()">
      <AFormItem v-bind="form.itemProps.password_old" :label="$t('zRuuClc8AtnYmMDsQMtsG')">
        <InputPassword v-model:value="form.state.password_old" :placeholder="$t('ow6ioyQmmtMfG5i9LkC3E')" />
      </AFormItem>
      <AFormItem v-bind="form.itemProps.password" :label="$t('a7FzBhgeyCnhcG3FCgP6h')">
        <InputPassword v-model:value="form.state.password" :placeholder="$t('hwbK7ZZedFNtXjMoargn')" />
      </AFormItem>
      <AFormItem v-bind="form.itemProps.password_confirm" :label="$t('mrEblLvgr1ZXcaYe5EAbZ')">
        <InputPassword v-model:value="form.state.password_confirm" :placeholder="$t('hwbK7ZZedFNtXjMoargn')" />
      </AFormItem>
      <AButton
        class="ant-cover__Button-3d-primary mb-2 mt-4" htmlType="submit"
        type="primary" block :disabled="disabled" :loading="disabled"
      >
        {{ $t('fVhxPoy2u9I4Q6dqrMh') }}
      </AButton>
    </AForm>
  </div>
</template>
